<template>
  <view >
					<!-- 页面的其他内容 -->
					<button class="floating-button" @click="handleClick">AI</button>
			 
	
	
					<!-- <uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" /> -->
				
					<!-- <button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text> -->
					<!-- </button> -->
					<view class="container">
						<uni-drawer ref="showRight" mode="right"   :mask-click="true"  >
							
							<!-- <uni-search-bar class="uni-mt-10" radius="5" placeholder="spark AI" clearButton="auto" cancelButton="none" @confirm="search" />
							<view class="scroll-view">
								<scroll-view class="scroll-view-box" scroll-y="true">
									
									<view class="chat-container">
										
										  <view v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
											{{ message.text }}
										  </view>
									</view>
									
								</scroll-view>
							</view>
							
							
							<view class="input-container">
								  <input type="text" v-model="inputText" placeholder="请输入消息" />
								  <button @click="sendMessage">发送</button>
							</view> -->
						<!-- 	<view  class="head">
								<text class="center-text">欢迎使用ChatGPT</text>
							</view> -->	
							<spack></spack>
							<view class="foot"></view>
						</uni-drawer>
					</view>
					
			
			
  </view>
</template>

<script setup>

const showRight = ref(null)
// 定义按钮点击事件
const  handleClick = () => {
 /* uni.showToast({
    title: '按钮被点击',
    duration: 2000
  }); */
  showRight.value?.open()
  
};


</script>


<style scoped>
.container {
  /* 页面容器样式 */
   display: flex;
    flex-direction: column;
    /* height: 100vh; */
	.head{
		top:100rpx;
	}
}

.floating-button {
  position: fixed;
  bottom: 50%; /* 距离底部50%，可以调整以精确到中间 */
  transform: translateY(50%);
  right: 20rpx; /* 距离右边的距离 */
  z-index: 999; /* 确保按钮在其他元素之上 */
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #ff5f5f;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}



.message {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.message.user {
  background-color: #d3d3d3;
  align-self: flex-start;
}

.message.ai {
  background-color: #87cefa;
  align-self: flex-end;
}

.input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: white;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
   
}

input[type="text"] {
  flex: 1;
  padding: 8px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  word-wrap: break-word;
  white-space: pre-wrap;
   width: 100%;
}

foot{
	height: 100rpx;
}


</style>